<template>
    <!-- 添加或修改对话框 -->
    <el-dialog :title="steps[step].title" v-model="open" width="620px" draggable align-center
        :close-on-click-modal="false" destroy-on-close>
        <component :is="steps[step]" v-model="form" ref="formRef" />
        <template #footer>
            <div class="footer">
                <div class="action">
                    <el-button @click="step--" v-show="step == 1">上一步</el-button>
                    <el-button type="primary" @click="handleNextStep" v-show="step == 0">下一步</el-button>
                    <el-button type="primary" @click="submitForm" v-show="step == 1">开始执行</el-button>
                </div>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { addScheduledJob } from "@/api/schedule/scheduledjob.js";
import steps from './steps';

defineOptions({ title: "新建作业" });

const emits = defineEmits(['scheduled'])
const { proxy } = getCurrentInstance()
const formRef = ref();
// 是否显示弹出层
const open = ref(false);
const step = ref(0);

const state = reactive({
    single: true,
    multiple: true,
    form: {
        trigger: {
            type: 'simple',
            startMode: 0,
        },
        extend: {
            type: 0,
            params: [{ key: undefined, value: undefined }],
        }
    },
    options: {

    }
})

const { form, rules, options, single, multiple } = toRefs(state)

// 重置表单
const reset = () => {
    form.value = {
        name: undefined,
        trigger: {
            type: 'simple',
            interval: 10,
            repeat: 5,
            forever: false,
            effictEndTime: undefined,
            immediate: false,
            effictStartTime: undefined,
            startMode: 0,
        },
        extend: {
            type: 0,
            jobType: undefined,
            method: 'GET',
            params: [{ key: undefined, value: undefined }],  //默认加载加载一个
        }
    }
    step.value = 0;
    proxy.resetForm("formRef")
};

const handleNextStep = () => {
    const validateForm = formRef.value?.validate;
    if (validateForm) {
        validateForm().then(res => {
            step.value = step.value + 1;
        })
    }
}


// 提交按钮
const submitForm = () => {
    const validateForm = formRef.value?.validate;
    if (validateForm) {
        validateForm().then(res => {
            const apiCall = addScheduledJob;
            apiCall(form.value).then(() => {
                proxy.$modal.msgSuccess("操作成功");
                open.value = false;
                emits('scheduled');
            });
        })
    }
};


const show = () => {
    reset();
    open.value = true;
}

defineExpose({ show })
</script>

<style lang="scss" scoped></style>